<template>
  <div>
    <el-row class="config-margin">
      <el-col :span="7" class="line">
        <tree
          @nodeClick="nodeClick"
          :open="true"
          :dealTree = "{add: false,delete:false,edit:false,move:false}"
          :treeData="treeData">
        </tree>
      </el-col>
      <el-col :span="17">
        <affix :label="$t('configLazyLoad.robotSeven.waitLearnQuestion')" class="margin-l">
          <div class="search" @keyup.enter="search">
            <el-input
              size="mini"
              :placeholder="$t('configLazyLoad.robotSeven.pleaseInputSearchContent')"
              v-model="searchObj.name"
              style="width:300px"
            >
              <i
                class="el-input__icon el-icon-search"
                slot="suffix"
                @click="search">
              </i>
            </el-input>
          </div>
          <common-table :tableHead="tableHead" :data="tableData" :pagination="pagination" @operate="operate" @turnPage="search">
          </common-table>
        </affix>
      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" top="10%" :lock-scroll="true" :title="commonDialog.title" :visible.sync="commonDialog.isShow" width="70%">
      <question-study :id="currentData" @refreshList="search" :refresh="commonDialog.random" :type="typeid" @close="commonDialog.isShow=false"></question-study>
    </el-dialog>
  </div>
</template>
<script>
  import tree from '../agentConfig/tree/Base/Tree.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import commonTable from './base/CommonTable'
  import questionStudy from './base/QuestionStudyDialog.vue'
  import {getCacheByKey} from '@/utils/m7Utils'
  export default {
    name: 'intelligentStudy',
    data () {
      return {
        depts: [],
        pagination: {
          currentPage: 0,
          count: 0,
          totalPage: 0
        },
        searchObj: {
          name: '',
          type: '',
          page: 1,
          limit: 10
        },
        currentData: '',
        treeData: {},
        tableData: [],
        tableHead: [
          {prop: 'num', label: this.$t('webchat.webchatTableNumber')},
          {prop: 'name', label: this.$t('configLazyLoad.robotSeven.standardQuestion1')},
          {prop: 'typeName', label: this.$t('report.sort')},
          {prop: 'likenessNum', label: this.$t('configLazyLoad.robotSeven.similarQuesToLearn')},
          {prop: 'operate', label: this.$t('sms.operate'), special: 'operate', operate: [{name: this.$t('sms.searchToLook'), type: 'view'}]}
        ],
        commonDialog: {
          isShow: false,
          title: this.$t('configLazyLoad.robotSeven.quesLearning'),
          random: 0
        },
        typeid: ''
      }
    },
    components: {
      tree,
      commonTable,
      affix,
      questionStudy
    },
    computed: {
      refreshTree () {
        return this.$store.state.config.robotConfig.refreshTree
      }
    },
    watch: {
      refreshTree: function () {
        this.restDeptTree()
      }
    },
    methods: {
      nodeClick (val) {
        if (val.pId) {
          this.searchObj.type = val._id
        } else {
          this.searchObj.type = ''
        }
        this.searchObj.name = ''
        this.search()
      },
      close () {
        this.commonDialog.isShow = false
      },
      operate (event) {
        this.commonDialog.isShow = true
        this.commonDialog.random = Math.random()
        this.commonDialog.title = this.$t('configLazyLoad.robotSeven.quesLearning')
        this.currentData = event.val._id
        this.typeid = getCacheByKey('quesTypes', 'name', event.val.typeName)._id
      },
      search (page) {
        this.searchObj.page = typeof page === 'number' ? page : 1
        this.$store.dispatch('intelligentStudyQuerys', this.searchObj).then((res) => {
          this.pagination.count = res.count
          this.pagination.currentPage = this.searchObj.page
          let list = res.list
          let arr = []
          let num = 0
          for (let i = 0; i < list.length; i++) {
            let question = list[i]
            num++
            question.likenessNum = question.likeness.length
            question.typeName = this.getDeptName(question.type)
            arr.push({operate: '1', num: num, _id: question._id, likenessNum: question.likenessNum, name: question.name, typeName: question.typeName})
          }
          this.tableData = arr
        })
      },
      getDeptName (id) {
        if (!id) {
          return this.$t('sms.quanBu')
        }
        return this.depts.filter(item => item._id === id)[0].name || ''
      },
      restDeptTree () {
        return this.$store.dispatch('getCache', {type: 'quesTypes'})
          .then((depts) => {
            let arr = []
            this.depts = depts || []
            dealDept(this.depts, arr, '')
            this.treeData = arr[0] || {}
          })
      }
    },
    deactivated () {
      this.commonDialog.isShow = false
    },
    beforeMount () {
      this.restDeptTree().then(() => {
        this.search()
      })
    }
  }
  function dealDept (depts, arr, key) {
    for (let i in depts) {
      let dept = depts[i]
      if (dept.pId === key) {
        let obj = {
          _id: dept._id,
          type: 'robot',
          treePath: dept.treePath,
          note: dept.note,
          pId: dept.pId,
          name: dept.name,
          order: dept.order || 0,
          children: []
        }
        arr.push(obj)
        dealDept(depts, obj.children, dept._id)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .config-margin
    margin-top 20px
  .search
    padding-bottom 10px
  .font-color
    color $cf-gray1
  .line
    border-right 1px solid #ccc
    overflow-x auto
  .margin-l
    margin-left 15px
</style>
